<template>
  <div class="section-container-4">
    <div class="header">
      <bannerHeader
        @open="open"
        title1="账户余额"
        title2="Account Balance"
        :isCheck="false"
        unit="( 万元 )"
      />
    </div>
    <div class="show-body" ref="reference"></div>
  </div>
</template>

<script>
import bannerHeader from "../banner-header-right";
import request from "@/utils/request";
import Qs from "qs";
import { mapState } from "vuex";
import myBar from "./bar";
import fnPopup from "./popup/index.js";
import echarts from "echarts";
export default {
  components: {
    bannerHeader,
    myBar,
  },
  data() {
    return {
      bannerList: [],
      max: 0,
      barColor: [
        //圆柱体颜色
        ["rgba(24, 144, 255, 1)", "rgba(96, 178, 255, 1)"],
        ["rgba(62, 196, 217, .7)", "rgba(101, 234, 255, .7)"],
        ["rgba(96, 216, 61, .7)", "rgba(162, 248, 137, .7)"],
        ["rgba(255, 229, 32, .7)", "rgba(255, 229, 32, .7)"],
      ],
    };
  },
  computed: {
    ...mapState("reportFormDark", ["deptId", "projectId"]),
  },
  watch: {
    deptId: {
      handler(val) {
        this.$nextTick(() => {
          this.screenBalance(); // 资金账户余额
        });
      },
      immediate: true,
    },
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.screenBalance(); // 资金账户余额
        });
      },
    },
  },
  created() {},
  methods: {
    open() {
      fnPopup(this);
    },
    screenBalance() {
      request({
        url: "/system/screen/balance",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
          projectId: this.projectId,
        }),
      }).then((res) => {
        this.draw(res.data);
        // let bannerList = [];
        // const barX = ["分公司账户", "电子承兑账户", "农民工专户", "外部单位"];
        // let max = 0;
        // if (res.data && res.data.length > 0) {
        //   res.data.forEach((item) => {
        //     const x = item.deptName;
        //     const id = item.deptName;
        //     let total = 0;
        //     let y = [];
        //     if (item.infos && item.infos.length > 0) {
        //       total = item.infos.reduce((t, i) => (t += i.amount || 0), 0);
        //       if (total) {
        //         total = (Number(total) / 10000).toFixed(3) || 0;
        //       }
        //       item.infos.forEach((el) => {
        //         if (el.amount) {
        //           el.amount = (Number(el.amount) / 10000).toFixed(3) || 0;
        //         }
        //         if (el.amount > max) {
        //           max = el.amount;
        //         }
        //         if (el.pName === barX[0]) {
        //           y[0] = el;
        //         }
        //         if (el.pName === barX[1]) {
        //           y[1] = el;
        //         }
        //         if (el.pName === barX[2]) {
        //           y[2] = el;
        //         }
        //         if (el.pName === barX[3]) {
        //           y[3] = el;
        //           y[3].pName = "第三方账户";
        //         }
        //       });
        //     }
        //     bannerList.push({
        //       x,
        //       total,
        //       id,
        //       y,
        //     });
        //   });
        // }
        // this.max = max;
        // this.bannerList = bannerList;
        // console.log(this.max, this.bannerList);
      });
    },
    draw(msg) {
      console.log(1221, msg);
      const names = msg[0].infos.map((item) => item.pName);
      const x = msg.map((item) => item.deptName);
      const y1 = msg.map((item) => {
        const data = [];
        item.infos.forEach((el) => {
          if (el.pName === names[0]) {
            data.push((Number(el.amount) / 10000).toFixed(3) || 0);
          }
        });
        return data[0];
      });
      const y2 = msg.map((item) => {
        const data = [];
        item.infos.forEach((el) => {
          if (el.pName === names[1]) {
            data.push((Number(el.amount) / 10000).toFixed(3) || 0);
          }
        });
        return data[0];
      });
      const y3 = msg.map((item) => {
        const data = [];
        item.infos.forEach((el) => {
          if (el.pName === names[2]) {
            data.push((Number(el.amount) / 10000).toFixed(3) || 0);
          }
        });
        return data[0];
      });
      const y4 = msg.map((item) => {
        const data = [];
        item.infos.forEach((el) => {
          if (el.pName === names[3]) {
            data.push((Number(el.amount) / 10000).toFixed(3) || 0);
          }
        });
        return data[0];
      });
      console.log(y1, y2, y3, y4);
      const dom = echarts.init(this.$refs.reference);
      const option = {
        legend: {
          textStyle: {
            //图例文字的样式
            fontSize: 10,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          // formatter: `{b} : {c}`,
          backgroundColor: "rgba(0, 51, 128, 1)",
          borderColor: "rgba(0, 79, 197, 1)",
          borderWidth: 2,
          padding: 10,
          textStyle: {
            color: "#8FC7FF",
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              opacity: 0.5,
            },
          },
          // trigger: "axis",
          // confine: true,
          // backgroundColor: "rgba(33, 40, 46, 1)",
          // formatter: (params) => {
          //   let tootip = "";
          //   const titleClass = `width:100%;text-align:left;font-size: 14px;font-family: Microsoft YaHei UI;font-weight: bold;color: #FFFFFF;`;
          //   const title = `<div style="${titleClass}">${params[0].name}：${
          //     params[params.length - 1].value
          //   }万元</div>`;

          //   let content = "";
          //   const contentClass = `
          //                 font-size: 12px;
          //                 font-family: Microsoft YaHei UI;
          //                 font-weight: 400;
          //                 line-height: 15px;
          //                 color: rgba(255, 255, 255, .64);
          //                 margin:4px 0;
          //                 `;
          //   params
          //     .filter((item, i) => i > 4)
          //     .forEach((item, i) => {
          //       const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${this.barColor[i][0]};"></span>`;

          //       if (this.legend.length > i) {
          //         content += `<div style="${contentClass}">${marker}${
          //           item.seriesName
          //         }：${this.yData[params[0].dataIndex].value[i]}万元</div>`;
          //       }
          //     });

          //   tootip = tootip + title + content;
          //   return tootip;
          // },
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(143, 199, 255, .16)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
          data: x,
        },
        grid: {
          top: "40",
          bottom: "0",
          right: "0",
          left: "0",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
          axisLabel: {
            color: "rgba(143, 199, 255, .48)", //x轴文本颜色
          },
          //   show:false,
        },
        series: [
          {
            name: names[0],
            type: "bar",
            data: y1,
            stack: "one",
            itemStyle: {
              normal: {
                color: this.barColor[0][0],
                // color: function (params) {
                //   if (params.value > 0) {
                //     return "#F2493C";
                //   } else {
                //     return "#45A5FF";
                //   }
                // },
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
            },
            type: "bar",
            barWidth: 12,
          },
          {
            name: names[1],
            type: "bar",
            data: y2,
            stack: "one",
            itemStyle: {
              normal: {
                color: this.barColor[1][0],
                // color: function (params) {
                //   if (params.value > 0) {
                //     return "#F2493C";
                //   } else {
                //     return "#45A5FF";
                //   }
                // },
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
            },
            type: "bar",
            barWidth: 12,
          },
          {
            name: names[2],
            type: "bar",
            data: y3,
            stack: "one",
            itemStyle: {
              normal: {
                color: this.barColor[2][0],
                // color: function (params) {
                //   if (params.value > 0) {
                //     return "#F2493C";
                //   } else {
                //     return "#45A5FF";
                //   }
                // },
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
            },
            type: "bar",
            barWidth: 12,
          },
          {
            name: names[3],
            type: "bar",
            data: y4,
            stack: "one",
            itemStyle: {
              normal: {
                color: this.barColor[3][0],
                // color: function (params) {
                //   if (params.value > 0) {
                //     return "#F2493C";
                //   } else {
                //     return "#45A5FF";
                //   }
                // },
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
            },
            type: "bar",
            barWidth: 12,
          },
        ],
      };
      dom.setOption(option);
      window.addEventListener("resize", () => {
        dom.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.section-container-4 {
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: vh(42);
  }

  .show-body {
    width: 100%;
    height: calc(100% - #{vh(42)});
    padding-top: vh(4);
  }
}
</style>